<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style></style>
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet"  href="../css/index.css">
    <script src="../js/axios.min.js" type="text/javascript"></script>
    <script src="../js/vue.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
    <!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <title>我的资料</title>
</head>
<body>
<div id="app">
    <el-container>
        <!--图片部分-->
        <el-tooltip class="item" effect="dark" content="点击图片进行修改" placement="right-start">
            <el-upload
                    class="upload-demo"
                    action="/pic/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-tooltip>
        <!--表单部分-->
        <div style="margin: 50px;"></div>
        <el-form :label-position="labelPosition" label-width="80px" :model="venueInfo">
            <el-form-item label="场馆账号">
                <el-input v-model="venueInfo.accountName" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="场馆姓名">
                <el-input v-model="venueInfo.name" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item label="场馆地址">
                <el-input v-model="venueInfo.address" :disabled="!use"></el-input>
            </el-form-item>

            <el-form-item label="经度">
                <el-input v-model="venueInfo.longitude" :disabled="!use"></el-input>
            </el-form-item>

            <el-form-item label="纬度">
                <el-input v-model="venueInfo.latitude" :disabled="!use"></el-input>
            </el-form-item>

            <el-form-item label="场馆电话">
                <el-input v-model="venueInfo.phone" :disabled="!use"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeUse()" v-show="!use">修改</el-button>
                <el-button type="primary" v-show="use" @click="submitInfo()">提交</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</div>
<script>
    new Vue({
        el:"#app",
        data () {
            return {
                venueInfo:{
                    accountId: "",// 不展示
                    accountName: "",
                    name: "",
                    address: "",
                    longitude: "",
                    latitude: "",
                    phone: "",
                    fileList: "[{name: '', url: 'https://silas103.oss-cn-chengdu.aliyuncs.com'}, {name: '', url: 'https://silas103.oss-cn-chengdu.aliyuncs.com'}]",//上传图片
                },
                use: false,
                labelPosition: "left"
            }
        },
        methods: {
            // 加载用户所有信息
            query() {
                axios.get("/venue/getMyVenue").then(resp => {
                    if (resp.data.code === resp.status) {
                        this.venueInfo = resp.data.data
                        this.venueInfo.fileList = "https://silas103.oss-cn-chengdu.aliyuncs.com/" + this.venueInfo.fileList
                    }
                })
            },
            handleRemove(file, fileList) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            changeUse(){
                this.use=true
            },
            submitInfo(){
                //修改场馆信息
                axios.post("/venue/venueModify", this.venueInfo).then(resp=>{
                    if (resp.data.code === resp.status) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.venueInfo = resp.data.data
                        this.venueInfo.image = "https://silas103.oss-cn-chengdu.aliyuncs.com/" + this.venueInfo.image
                        this.use=false
                    }
                })
            }
        },
        created() {
            this.query()
        }
    })
</script>
</body>
</html>